<template>
  <div>
    <h1>日志记录示例</h1>
    <button @click="logDebug">记录调试信息</button>
    <button @click="logInfo">记录信息</button>
    <button @click="logWarn">记录警告信息</button>
    <button @click="logError">记录错误信息</button>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import logger from '../utils/logger';

// 定义方法
const logDebug = () => {
  logger.debug('这是一条调试信息', { key: 'value' });
};

const logInfo = () => {
  logger.info('这是一条信息');
};

const logWarn = () => {
  logger.warn('这是一条警告信息', { warningCode: 404 });
};

const logError = () => {
  try {
    throw new Error('这是一个错误');
  } catch (error) {
    if (error instanceof Error) {
      logger.error('发生了一个错误', error, { errorCode: 500 });
    } else {
      // 如果 error 不是 Error 类型，可以处理这种情况
      logger.error('发生了一个错误', new Error('未知错误'), { errorCode: 500 });
    }
  }
};
</script>

<style scoped>
/* 你可以在这里添加样式 */
</style>